Components ∋ Radio

まずはRadioコンポーネントを使う準備をします。

import Radio from "@material-ui/core/Radio";

もし TypeScript 上でならRadioProps型も取り込むと便利かもしれません。

import Radio, {RadioProps} from "@material-ui/core/Radio";

単に<Radio />と置くだけでも以下の画像のように動きます。（分かりやすいようにチェックを入れたものを横に置いてます。）

checked

(event: React.ChangeEvent, checked: boolean) => void;

 {
    console.log(changeEvent, checked /* === true */);
  }}
/>;

<input>valuechangeEventvalue

 {
    console.log(changeEvent.target.value /* === 'foo' */);
  }}
  value="foo"
/>;

<input>name

RadioProps<input>

data-foo

makeStylesuseStylesclasses

small | mediummedium

'primary' | 'secondary' | 'default''secondary'
'primary''default'

<svg>React.ReactNode<svg>

icon<svg>React.ReactNode

<>
  
    }
  />
  
    }
  />
;

import RadioGroup from '@material-ui/core/RadioGroup';

valuevalue

←↓↑→

純